/* eslint-disable jsx-a11y/label-has-associated-control */
import type { MetaFunction } from "@remix-run/node";
import { Link } from "@remix-run/react";
import { motion } from "motion/react";
import { Theme, useTheme } from "remix-themes";
import { AnimateType } from "~/components/animate_type";

export const meta: MetaFunction = () => {
  return [
    { title: "Remix Website" },
    { name: "description", content: "Welcome to Remix Website!" },
  ];
};

export default function Index() {
  const [theme, setTheme] = useTheme();
  const changeTheme = (e: React.ChangeEvent<HTMLInputElement>) => {
    e.target.checked ? setTheme(Theme.DARK) : setTheme(Theme.LIGHT);
  };

  return (
    <div className="flex flex-col min-h-screen">
      <header className="flex items-center w-screen py-6 px-16">
        <div>LOGO</div>
        <ul className="flex items-center space-x-4 ml-auto">
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/">Skill</Link>
          </li>
          <li>
            <Link to="/">Contact</Link>
          </li>
          <li>
            <Link to="/">Blog</Link>
          </li>
          <li>
            <label className="swap swap-rotate btn-ghost btn-circle">
              {/* this hidden checkbox controls the state */}
              <input type="checkbox" onChange={changeTheme} checked={theme === Theme.DARK} />
              {/* sun icon */}
              <svg
                className="swap-off size-6 fill-current"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24">
                <path
                  d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
              </svg>
              {/* moon icon */}
              <svg
                className="swap-on size-6 fill-current"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24">
                <path
                  d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
              </svg>
            </label>
          </li>
        </ul>
      </header>
      <main className="px-16 flex flex-col gap-24 mt-24">
        <article className="flex justify-center">
          <motion.div
            initial={{ transform: "translateX(-1000px)" }}
            animate={{ transform: "translateX(0px)" }}
            transition={{ duration: 0.5 }}
            className="max-w-2xl">
            <h1 className="text-5xl font-bold mb-4
              bg-gradient-to-r from-violet-600 to-blue-500
              bg-clip-text text-transparent">
              Hello, I am Victor
            </h1>
            <h2 className="text-4xl font-bold mb-4">
              <AnimateType rotateText={[
                "UI/UX Designer",
                "Frontend developer",
                "Backend developer",
              ]} />
            </h2>
            <div className="mt-10">
              I am a fast learner, hard worker and team player, passionate about building first-class websites.
            </div>
            <button className="group btn btn-outline btn-primary mt-10
              hover:bg-gradient-to-br hover:from-violet-600 hover:to-blue-500
            ">
              <span className="text-xl
                group-hover:bg-none group-hover:text-primary-content
                bg-gradient-to-br from-violet-600 to-blue-500
                bg-clip-text text-transparent">
                Download CV
              </span>
            </button>
          </motion.div>
          <motion.div
            initial={{ transform: "translateX(1000px)" }}
            animate={{ transform: "translateX(0px)" }}
            transition={{ duration: 0.5 }}
            className="ml-8">
            <div className="sticky top-4">
              <img className="w-96" src="/programer.png" alt="programer" />
            </div>
          </motion.div>
        </article>
        {/* skills */}
        <article className="flex justify-center">
          <motion.div
            initial={{ transform: "translateY(1000px)" }}
            animate={{ transform: "translateY(0px)" }}
            transition={{ duration: 0.5 }}
            className="stats">
            <div className="stat">
              <div className="stat-figure text-primary">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  className="inline-block h-8 w-8 stroke-current">
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                </svg>
              </div>
              <div className="stat-title">Total Likes</div>
              <div className="stat-value text-primary">25.6K</div>
              <div className="stat-desc">21% more than last month</div>
            </div>

            <div className="stat">
              <div className="stat-figure text-secondary">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  className="inline-block h-8 w-8 stroke-current">
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                </svg>
              </div>
              <div className="stat-title">Page Views</div>
              <div className="stat-value text-secondary">2.6M</div>
              <div className="stat-desc">21% more than last month</div>
            </div>

            <div className="stat">
              <div className="stat-figure text-secondary">
                <div className="avatar online">
                  <div className="w-16 rounded-full">
                    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" alt="avatar" />
                  </div>
                </div>
              </div>
              <div className="stat-value">86%</div>
              <div className="stat-title">Tasks done</div>
              <div className="stat-desc text-secondary">31 tasks remaining</div>
            </div>
          </motion.div>
        </article>
      </main>
      <footer>
      </footer>
    </div>
  );
}